<!-- 内部首页 -->
<template>
  <transition mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <div id="homePage">
      <div class="home_body">
        <!-- 头部菜单栏 -->
        <HomeHead :selectBtn="selectBtn"></HomeHead>
        <!-- 内容区域 -->
        <div class="content_box_out">
          <div class="content_box">
            <!-- 左边内容区域 路由切换 -->
            <router-view></router-view>
            <!-- 右边内容区域 -->
            <div class="content_right_box">
              <!-- 右边写东西功能区域 -->
              <div class="right_box_write">
                <div class="right_box_write_up">
                  <!-- 写回答 -->
                  <router-link to="/writeQuestion">
                    <div class="write_answer_box">
                      <div class="write_img_box"><img src="../assets/write_answer.png" class="write_img"></div>
                      <div class="write_text">写回答</div>
                    </div>
                  </router-link>
                  <!-- 写文章 -->
                  <div class="write_article_box" @click="dialogFormVisible = true">
                    <div class="write_img_box"><img src="../assets/write_article.png" class="write_img"></div>
                    <div class="write_text">写问题</div>
                    <el-dialog title="写问题" :visible.sync="dialogFormVisible" append-to-body>
                      <el-form :model="form">
                        <el-form-item label="问题标题" :label-width="formLabelWidth">
                          <el-input v-model="form.title" placeholder="请输入您的问题" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="内容" :label-width="formLabelWidth">
                          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.content"
                                    placeholder="输入问题背景,条件" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="话题" :label-width="formLabelWidth">
                          <el-select v-model="value" placeholder="请选择">
                            <el-option
                              v-for="item of ClasssifyList"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="commit">确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>
                  <!-- 写想法 -->
                  <router-link to="/writeQuestion">
                    <div class="write_idea_box">
                      <div class="write_img_box"><img src="../assets/write_idea.png" class="write_img"></div>
                      <div class="write_text">写想法</div>
                    </div>
                  </router-link>
                </div>
                <div class="right_box_write_down">
                </div>
              </div>
              <!-- 其他功能区域 -->
              <div class="right_box_function">
                <div class="function_row_box">
                  <!-- Live -->
                  <router-link to="/home">
                    <div class="function_box_Live">
                      <div class="function_img_box"><img src="../assets/Live_imag.png" class="function_img"></div>
                      <div class="function_text">Live</div>
                    </div>
                  </router-link>
                  <!-- 书店 -->
                  <router-link to="/home">
                    <div class="function_box_book">
                      <div class="function_img_box"><img src="../assets/book_imag.png" class="function_img"></div>
                      <div class="function_text">书店</div>
                    </div>
                  </router-link>
                  <!-- 圆桌 -->
                  <router-link to="/home">
                    <div class="function_box_circle">
                      <div class="function_img_box"><img src="../assets/circle_imag.png" class="function_img"></div>
                      <div class="function_text">圆桌</div>
                    </div>
                  </router-link>
                </div>
                <div class="function_row_box">
                  <!-- 专栏 -->
                  <router-link to="/home">
                    <div class="function_box_special">
                      <div class="function_img_box"><img src="../assets/special_img.png" class="function_img"></div>
                      <div class="function_text">专栏</div>
                    </div>
                  </router-link>
                  <!-- 付费质询 -->
                  <router-link to="/home">
                    <div class="function_box_pay">
                      <div class="function_img_box"><img src="../assets/pay_imag.png" class="function_img"></div>
                      <div class="function_text">付费质询</div>
                    </div>
                  </router-link>
                </div>
              </div>
              <!-- 右边菜单区域功能 -->
              <div class="right_box_menu">
                我是个菜单
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import HomeHead from '../components/HomeHead'

  export default {
    name: 'homePage',
    inject: ['reload'],
    components: {
      'HomeHead': HomeHead
    },
    data () {
      return {
        selectBtn: 1,
        dialogTableVisible: false,
        dialogFormVisible: false,
        ClasssifyList: [],
        formLabelWidth: '120px',
        form: {
          title: '',
          content: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],
        value: ''
      }
    },
    created () {
      this.axios.get('/api/getClassify')
        .then(res => {
          this.ClasssifyList = res.data.data
          console.log(res)
        })
    },
    computed: {
    },
    methods: {
      commit () {
        this.dialogFormVisible = false
        if (this.form.title == null) {
          this.$Message.error('回复不可为空!')
        } else {
          this.axios.get('/api/insertQuestion', {
            params: {
              content_question: this.form.content,
              title: this.form.title,
              phone: sessionStorage.getItem('phone'),
              cid: this.value
            }
          })
            .then((response) => {
              if (response.status === 200) {
                this.$Message.success('成功!')
                this.reload()
              } else {
                this.$Message.error('失败!')
              }
            })
            .catch((error) => {
              this.$Notice.error({
                title: '通知',
                desc: '接口，异常！'
              })
              console.info(error)
            })
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../../../static/css/home/HomePage.css';
</style>
